<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        a{text-decoration: none;font-size: 14px;text-align: center}
        a:link{color:#cccccc }
        a:hover{color: white}
        .center{width: 1200px;margin: 0 auto}
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .el-select .el-input {
            width: 130px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
        ul{
            list-style-type: none;
            overflow: hidden;/*解决高度为0 导致的异常*/
        }
        li{
            float: left;
            margin-right: 10px;
        }
        /* 轮播图容器样式 */
        .slideshow-container {
            width: 100%;
            position: relative;
            margin: auto;
        }

        /* 图片渐隐渐现效果样式 */
        .mySlides {
            display: none;
            position: absolute;
            top: -800px;
            left: 250px;
            right: 100px;
            width: 300px;
            height:300px;
        }

        /* 左右切换箭头样式 */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: all 0.2s ease;
        }

        /* 鼠标悬停时箭头颜色变化 */
        .prev:hover,
        .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

        .r1 img{
            width: 135px;
            height: 80px;
        }
        .img{
            background-color: rgba(255,255,255,0.3);
        }
        .img:hover{
            /*margin: 10px 0 0 10px;*/
            /*设置为相对定位*/
            position: relative;
            /*通过left/right/top/bottom相对于元素自身位置偏移*/

        }
        .card{
            height: 245px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <my-header></my-header>
        <el-main>
            <div class="center"
                 style="width: 1200px;height: 800px;background-color: white">
                    <div class="block" style="width: 1200px;">
                        <el-carousel trigger="click" height="400px" widgh="1000px">
                            <el-carousel-item v-for="item in arr" :key="item">
                               <img :src="item" width="1500px" height="400px">
                            </el-carousel-item>
                        </el-carousel>
            <span class="demonstration"> 报名直达 <hr>
           【疾速浪漫•西湖爱心线】6月， 齐聚西湖，用脚步记录浪漫，一起在地图上画一个爱心，
                一半青山，一半西湖~）1154人已报名
                <a href="" style="color: orangered"><u>我也要报名</u><hr></a> </span>
                        <p style="color: #409EFF">自然风景</p>
                        <div style="width: 1200px;">
                            <el-row class="r1" gutter="10">
                                <el-col span="6">
                                   <el-card class="card" ><a href="https://www.baidu.com/?tn=44004473_8_oem_dg"><img  src="imgs/img5.jpg" style="width: 100%;height: 200px;"></a></el-card>
                                </el-col>
                                <el-col span="18" >
                                    <el-row class="r1" gutter="10" >
                                        <el-col v-for="s in imgs" class="img" span="4"><el-card ><a href="http://www.feifanxiaoshi.com/"><img :src="s"></a> </el-card></el-col>
                                    </el-row>
                                    <el-row class="r2" gutter="10">
                                        <el-col v-for="d in imgs" class="img" span="4">
                                            <el-card><a href="https://www.baidu.com/?tn=44004473_8_oem_dg"><img  :src="d"></a>  </el-card></el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                        <p>活动游记</p>
                        <el-row gutter="50">
                            <el-col v-for="c in contentArr" span="6">
                                <el-card style="margin: 10px 0">
                                    <a style="color: #333;text-decoration: none">
                                        <a  href="https://www.baidu.com/?tn=44004473_8_oem_dg" ><img :src="c.img" width="100%" height="144"></a>
                                    </a>
                                    <el-row gutter="20">
                                        <el-col span="4">
                                        </el-col>
                                        <el-col span="20" style="size: A3" >
                                            <a href=""><p style="color:black;">{{c.content}}}</p></a>
                                        </el-col>
                                    </el-row>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
            </div>

        </el-main>

        <el-footer>
            <div style="height: 330px;background-color: #727272;color: white;margin: 0 auto">
                <el-row style="width: 1200px;margin: 0 auto" >
                    <el-col span="4">
                        <p style="font-size: 24px;padding-left: 20px;margin-bottom: 0"><i class="el-icon-phone" ></i>服务热线</p>
                        <p style="margin-top: 5px;padding-left: 30px">400  679  6699</p>
                        <p style="font-size: 24px;padding-left: 20px;margin-bottom: 0"><i class="el-icon-message" ></i>意见反馈</p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">关于鹿途</p>
                        <p><a href="/info.html">鹿途简介</a></p>
                        <p><a href="/info.html">法律声明</a></p>
                        <p><a href="/info.html">网站地图</a></p>
                        <p><a href="/info.html">用户协议与隐私条款</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">加盟合作</p>
                        <p><a href="/info.html">合作加盟</a></p>
                        <p><a href="/info.html">商旅合作</a></p>
                        <p><a href="/info.html">门票合作</a></p>
                        <p><a href="/info.html">其他合作</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">联系我们</p>
                        <p><a href="/info.html">联系我们</a></p>
                        <p><a href="/info.html">投诉建议</a></p>
                        <p><a href="/info.html">友情链接</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">旅行服务</p>
                        <p><a href="/info.html">旅游攻略</a></p>
                        <p><a href="/info.html">旅游特价</a></p>
                        <p><a href="/info.html">酒店预订</a></p>
                    </el-col>
                    <el-col span="4">
                        <a href="/" style="font-size: 36px;margin: 0; padding: 0;float: right">
                            <img src="imgs/logo.png" width="150px" height="150px">
                        </a>
                    </el-col>
                </el-row>
                <el-divider ></el-divider>
                <div style="width: 800px; color: aliceblue;font-size: 12px;margin: 0 auto">
                <p style="margin-top: 0">Copyright © 2002-2028  版权所有  鹿途网络科技股份有限公司</p>
                <p>经营许可证编号：合字B2-20180018      备案序号：苏ICP备09033674号 苏公网安备32059002001063号     旅行社业务许可证：L-JS-CJ00076</p>
                <p>国家文旅部全国旅游投诉热线：拨打12345，或登录<a style="font-size: 12px">全国旅游网络投诉举报平台</a></p>
                </div>
            </div>
        </el-footer>

    </el-container>
</div>


</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                contentArr:[{img:"imgs/img2.jpg",content:"【探索苏州·平江风月】全年计划，深度探索平江路/访江南豪宅/探姑苏文艺双绝/赠画扇描诗体验t/重拾苏城烟雨里的锦绣往事（3.5h探索苏州，2-10人vip精致小团）"},
                {img:"imgs/img2.jpg",content:"【探索苏州·平江风月】全年计划，深度探索平江路/访江南豪宅/探姑苏文艺双绝/赠画扇描诗体验t/重拾苏城烟雨里的锦绣往事（3.5h探索苏州，2-10人vip精致小团）"},
                {img:"imgs/img2.jpg",content:"【探索苏州·平江风月】全年计划，深度探索平江路/访江南豪宅/探姑苏文艺双绝/赠画扇描诗体验t/重拾苏城烟雨里的锦绣往事（3.5h探索苏州，2-10人vip精致小团）"},
                {img:"imgs/img2.jpg",content:"【探索苏州·平江风月】全年计划，深度探索平江路/访江南豪宅/探姑苏文艺双绝/赠画扇描诗体验t/重拾苏城烟雨里的锦绣往事（3.5h探索苏州，2-10人vip精致小团）"},
                {img:"imgs/img2.jpg",content:"【探索苏州·平江风月】全年计划，深度探索平江路/访江南豪宅/探姑苏文艺双绝/赠画扇描诗体验t/重拾苏城烟雨里的锦绣往事（3.5h探索苏州，2-10人vip精致小团）"},
                {img:"imgs/img2.jpg",content:"【探索苏州·平江风月】全年计划，深度探索平江路/访江南豪宅/探姑苏文艺双绝/赠画扇描诗体验t/重拾苏城烟雨里的锦绣往事（3.5h探索苏州，2-10人vip精致小团）"},
                {img:"imgs/img2.jpg",content:"【探索苏州·平江风月】全年计划，深度探索平江路/访江南豪宅/探姑苏文艺双绝/赠画扇描诗体验t/重拾苏城烟雨里的锦绣往事（3.5h探索苏州，2-10人vip精致小团）"},
                {img:"imgs/img2.jpg",content:"【探索苏州·平江风月】全年计划，深度探索平江路/访江南豪宅/探姑苏文艺双绝/赠画扇描诗体验t/重拾苏城烟雨里的锦绣往事（3.5h探索苏州，2-10人vip精致小团）"}],

                imgs:["imgs/img2.jpg",
                    "imgs/img3.jpg",
                    "imgs/img4.jpg",
                    "imgs/img5.jpg",
                    "imgs/img6.jpg",
                    "imgs/img8.jpg"],
                isShow:false,
                oneDay:["亲子","探险","远足"],
                arr:["imgs/img3.jpg" , "imgs/img2.jpg" , "imgs/img4.jpg"],
                arr1:["武功山","青岛","泰山","太湖","九峰山","故宫","东澳岛","木梨硔","海岛自由行","莫干山","昆明"]
            }
        },
        methods: {
            img(){

            },
            change(){
                v.isShow=true
            }
        },

    })

</script>
</html>